<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>商品小计</th>
                <th>操作</th>
            </tr>
            <tr v-for="(good,index) in goods" :key="index">
                <td >{{good.id}}</td>
                <td >{{good.name}}</td>
                <td >{{good.price}}</td>
                <td >{{good.count}}</td>
                <td >{{good.price * good.count}}</td>
                <td ><button @click="minus(index)">-</button></td>
                <td ><button @click="goods.splice(index,1)">删除</button></td>
                <td ><button @click="good.count++">+</button></td>
            </tr>
            <tr>
                <td colspan="5">总价:{{goods.reduce((pre,good) => pre + good.price * good.count,0)}}</td>
            </tr>
        </table>
        <button @click="goodsShow=!goodsShow">生成购物清单</button>
        <div v-for="good in goods":key="good.id" v-if="goodsShow">
            <p>商品名称:{{good.name}}</p>
            <p>商品单价:{{good.price}}</p>
            <p>商品数量:{{good.count}}</p>
            <p>商品小计:{{good.price * good.count}}</p>
            <hr>
        </div>
        <h6 v-if="goodsShow">总价：{{goods.reduce((pre,good) => pre + good.price * good.count,0)}}</h6>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            goods: [
                {id: 1, name: 'iphone', price: 8000, count: 0},
                {id: 2, name: 'ipad', price: 4000, count: 0},
                {id: 3, name: 'macbook', price: 20000, count: 0},
                {id: 4, name: 'ipod', price:4000, count: 0}
            ],
            goodsShow:false
        },methods: {
                minus(index){
                    this.goods[index].count--
                    if(this.goods[index].count < 0){
                        this.goods.splice(index,1)
                    }
                }
        }

    })
</script>
</html>